<template>
    <div>
      <div class="loading" v-if="isLoading" :key="'loading'"></div>
      <slot v-else></slot>
    </div>
  </template>
  <script>
  export default {
    props: {
      source: {
        require: true
      },
      urls: {
        type: Array,
        default: () => {
          new Array();
        }
      }
    },
    data() {
      return {
        isLoading: true
      };
    },
    watch: {
      source: function() {
        if (this.source) {
          this.isLoading = false;
        }
      }
    },
    mounted: function() {
      if (this.urls) {
        this.__loader_checks.push((url, config) => {
          if (this.urls.indexOf(url) !== -1) {
            this.isLoading = true;
          }
        });
      }
    }
  };
  </script>
  <style scoped>
  .loading {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left-color: red;
    animation: loading 1s infinite linear;
  }
  
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  